<template>
	<view>
		<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}"
			markers="{{markers}}" show-location style="width: 100%; height: 300px;"></map>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';

	const controls = ref([{
		id: 1,
		iconPath: '/static/images/coach/address_bg.png',
		position: {
			left: 10,
			top: 300 - 50,
			width: 50,
			height: 50,
		},
		clickable: true,
	}, ]);

	const markers = ref([{
		id: 0,
		latitude: 23.099994,
		longitude: 113.324520,
		width: 50,
		height: 50,
		title: '这里是标记点',
		iconPath: '/static/images/coach/address_bg.png',
		callout: {
			content: 'Hello',
			color: '#000000',
			fontSize: 15,
			borderRadius: 5,
			display: 'ALWAYS',
		},
	}, ]);
</script>

<style lang="scss" scoped>
	// .map {
	// 	width: 686rpx;
	// 	height: 400rpx;
	// 	margin-top: 32rpx;
	// 	margin: 32rpx auto;

	// 	.map_ {
	// 		width: 686rpx;
	// 		height: 400rpx;
	// 		border-radius: 40rpx;
	// 	}
	// }
</style>